import {Component} from '@angular/core';
import {DataService} from './data.service'

declare let echarts:any;

@Component({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.styl']})

export class AppComponent {
  title = 'app';
  infos = [
    {
      name: 'Bitcoin'
    }, {
      name: 'Etheruem'
    }, {
      name: 'Litecash'
    }, {
      name: 'monero'
    }
  ];
  tops = [
    {
      name: 'wwwwww1',
      speed: 983824
    }, {
      name: 'wwwwww1',
      speed: 983824
    }, {
      name: 'wwwwww1',
      speed: 983824
    }, {
      name: 'wwwwww1',
      speed: 983824
    }, {
      name: 'wwwwww1',
      speed: 983824
    }, {
      name: 'wwwwww1',
      speed: 983824
    }, {
      name: 'wwwwww1',
      speed: 983824
    }, {
      name: 'wwwwww1',
      speed: 983824
    }, {
      name: 'wwwwww1',
      speed: 983824
    }, {
      name: 'wwwwww1',
      speed: 983824
    }
  ]
  lists = [
    {
      choice: "DUIS AUTE IRURE",
      state: false
    }, {
      choice: "choice",
      state: true
    }, {
      choice: "DUIS AUTE IRURE",
      state: false
    }, {
      choice: "choice",
      state: false
    }, {
      choice: "choice",
      state: false
    }
  ];
  constructor(private dataService: DataService) {
  }

  ngOnInit() {
    this.graph()
  }
  turn(index) {
    this.lists[index].state = !this.lists[index].state
  }



  graph() {

  let myGraph = echarts.init(document.getElementById('graph'))

this.dataService.getDatas().then((data)=>{

  let _list: Array<any> = []

let now = '2017-11-30'

let anchor: Array<any> = [
    {name:now+' 00:00', value:[now+' 00:00', 0]},
    {name:now+' 23:59', value:[now+' 23:59', 0]}
    ];


function formatDate(date, format):String {
    date = new Date(date);
    let map = {
        "M": date.getMonth() + 1, //月份
        "d": date.getDate(), //日
        "h": date.getHours(), //小时
        "m": date.getMinutes(), //分
        "s": date.getSeconds(), //秒
        "q": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
    };

    format = format.replace(/([yMdhmsqS])+/g, (all, t) => {
        var v = map[t];
        if (v !== undefined) {
            if (all.length > 1) {
                v = '0' + v;
                v = v.substr(v.length - 2);
            }
            return v;
        } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
    return format;
}

data.forEach((i,I)=>{
  if(!!i[0] && _list.length <= 100){
    _list.push({
      name: formatDate(i[1]*1000,'yyyy-MM-dd hh:mm'),
      value:[
      formatDate(i[1]*1000,'yyyy-MM-dd hh:mm'),
      i[0]
      ]
    })
  }
})


let option = {
    title: {
        text: 'Hashrate PH/s'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getHours() + ':' + date.getMinutes() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        },
        interval:3600*1000,
        axisLabel:{
          formatter:(value)=>{
            return formatDate(value,'hh:mm')
          }
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: _list
    },{
        name:'.anchor',
        type:'line', 
        showSymbol:false, 
        data:anchor,
        itemStyle:{normal:{opacity:0}},
        lineStyle:{normal:{opacity:0}}
    }]
};
myGraph.setOption(option)

})


  }
}
